<template>
  <!-- 登录页面 -->
  <div>
    <div class="logo-wrap w">
      <router-link to="/">
        <img class="logo-img" src="../../static/img/logo.png" alt="">
      </router-link>
      </div>
      <div class="container-wrap">
        <img src="../../static/img/5e5b07e623de3.jpg" class="container-bg" />
        <div class="login-container">
          <div class="form-box" style="width: 432px">
            <div class="form-tab">
              <span class='form-tab-name'>{{$t('邮箱注册')}}</span>
            </div>
            <div>
              <div prop="username" class="form-item">
                  <input class="form-input" type="text" v-model="formDate.email"  :placeholder="$t('请输入邮箱')" />
              </div>
              <div prop="email" class="form-item" v-if="is_email == 1">
                  <input class="form-input" v-model="formDate.code"  :placeholder="$t('请输入验证码')" />
                  <span class="get-code" @click="getCode">{{ isStart ? time + ' S' : $t('获取验证码') }}</span>
              </div>
              <div prop="password" class="form-item">
                  <input class="form-input" type="password" v-model="formDate.password"  :placeholder="$t('请输入密码')" />
              </div>
              <div class="policy">
                <div class="policy-left" @click="onPolicyCheck">
                    <Icon  v-if="agreeCheck" size="21" type="md-checkmark-circle"  color="#e2231a"/>
                    <span class="policy-dot" v-if="!agreeCheck" />
                  {{$t('我已阅读并同意')}}
                </div>
                <router-link target="_blank" :to="{path:'/ArticleDetail',query:{title:'用户隐私政策'}}">
                <span class="policy-a"> {{$t('《用户隐私政策》')}} </span>
              </router-link>
              </div>
                  <Button class="main-btn"  type="error" size="large" @click="handleSubmit('formInline')" long>{{$t('注册')}}</Button>
            </div>
          <p class="bottom">
            <router-link :to="{path:'login'}">
              <span class="bottom-link">{{$t('返回登录')}}</span>
            </router-link>
            <router-link :to="{path:'Register'}">
              <span class="bottom-link">{{$t('手机号注册')}}</span>
            </router-link>
          </p>
          </div>
        </div>
    </div>
  </div>

  </template>

  <script>
  import store from '@/vuex/store';
  import { mapMutations, mapActions } from 'vuex';
  import Authen from "@/components/authentication"
  export default {
    name: 'Register',
    data () {
      return {
        formDate: {
          email: '',
          password: '',
          code: ''
        },
        isStart: false,
        time: 60,
        is_email: 1,
        agreeCheck: false
      }
    },
    components:{
      Authen
    },

    created () {
      this.getShowConfig()
    },

    methods: {
      ...mapActions(['login']),
      handleSubmit (name) {
        if (!this.formDate.email) {
          return this.$Message.error('请输入邮箱')
        }

        if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(this.formDate.email)) {
          return this.$Message.error('请输入正确的邮箱')
        }

        if (this.is_email == 1 && !this.formDate.code) {
          return this.$Message.error('请输入验证码')
        }
        if (!this.formDate.password.length) {
          return this.$Message.error(this.$t('请输入密码'))
        }

        if (this.formDate.password.length < 6) {
          return this.$Message.error(this.$t('请输入不小于6位数的密码'))
        }
        
        this.$http.getRegister({
          email: this.formDate.email,
          phonecode: this.formDate.code,
          password: this.formDate.password,
          type: 1,
          xieyi: 1,
          register_client: 'pc',
        }).then((res) => {
          if (res.status == 200) {
            this.$Message.success(res.mess)
            setTimeout(() => {
              this.$router.push('/login')
            }, 600);
          }
        }).catch((err) => {
          console.log(err);
        })
      },
      onPolicyCheck(){
        this.agreeCheck = !this.agreeCheck
      },
      
      getShowConfig(){
        this.$http.getShowConfig().then(res=>{
          if(res.status===200){
            res.data.map(item=>{
              if(item.ename == 'is_email'){
                this.is_email = parseInt(item.value)
              }
            })
          }
        })
      },

      getCode () {
        if (this.isSend) {
          return false
        }

        this.$http.getEmailCode({
          email: this.formDate.email,
          type: 10,
        }).then((res) => {
          if (res.status == 200) {
            this.isStart = true
            this.timer = setInterval(() => {
              if (this.time === 0) {
                this.isSend = false
                this.isStart = false
                this.time = 60
                clearInterval(this.timer)

                return false
              }

              this.time = this.time - 1
            }, 1000)
          }
        })
      }
    },
    store
  };
  </script>

  <style lang="scss" scoped>
  .container{
    &-wrap{
    width: 100%;
    margin: 0 auto;
    height: 545px;
    position: relative;
    overflow: hidden;
    }
    &-bg{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
    }
  }

  .login-container {
    position: absolute;
    right: 200px;
  }

  .logo{
    &-wrap{
      padding:10px 0
    }
    &-img{
      width:150px
    }

  }

  .form{
    &-box{
    padding:40px 50px;
    margin: 20px auto;
    background-color: #Fff;
    }
  }
  .main-btn{
   height: 50px;
   background-color: #e2231a;
   border-radius: 0;
  }
  .bottom{
    text-align: center;
    color:#bcbcbc;
    &-link{
      color:#e2231a;
    }
  }
  
  .container{
    &-wrap{
    width: 100%;
    margin: 0 auto;
    height: 545px;
    position: relative;
    overflow: hidden;
    }
    &-bg{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
    }
  }

  .login-container {
    position: absolute;
    right: 200px;
  }

  .form{
    &-box{
    padding:40px 50px;
    margin: 30px auto;
    background-color: #Fff;
    }
    &-tab{
      display: flex;
      cursor: pointer;
      justify-content: space-around;
      margin-bottom: 30px;
      &-name{
        font-size: 28px;
        font-weight: 500;
        transition: all 0.4s;
        &-active{
          color: #e2231a;
        }
      }
    }
  }
  .main-btn{
   height: 50px;
   background-color: #e2231a;
   border-radius: 0;
  }

  .form{
    &-item{
      display: flex;
      align-items: center;
      border:1px solid #dcdcdc;
      margin:20px 0;
    }
    &-input{
      width:240px;
      border: none;
      padding:0 15px;
      height: 48px;
      outline: 0;
      color:#666;

    }
    &-label{
      padding:0 24px;
      height: 48px;
      line-height: 48px;
      border-right:1px solid #dcdcdc
    }
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    text-align: center;
    color:#bcbcbc;
    margin-top: 20px;
    &-link{
      color:#e2231a;
    }
  }

  .policy{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    &-a{
      color:#e2231a;
    }
    &-left{
      display: flex;
      align-items: center;

    }
    &-dot{
      width:16px;
      height: 16px;
      border-radius: 80px;
      border: 1px solid #dcdcdc;
      flex-shrink: 0;
      display: inline-block;
      margin-right: 5px;
    }

  }

.get-code{
  border-left: 1px solid #dcdcdc;
  padding:0 8px;
  cursor: pointer;
}
  /deep/ .ivu-input-wrapper{
    width:100%;
  }
  </style>
